import { BrowserRouter as Router, Route, Routes, Navigate, useRoutes } from 'react-router';
import { lazy, } from 'react';

// 路由组件懒加载
const Login = lazy(() => import('../Pages/Login'));
const NoteClass = lazy(() => import('../Pages/noteClass'));
const Register = lazy(() => import('../Pages/register'));
const NodeList = lazy(() => import('../Pages/NodeList'));
const NoteDetail = lazy(() => import('../Pages/NoteDetail'));
const NoteAdd = lazy(() => import('../Pages/NoteAdd'));

const routes = [
    {
        path: '/',
        element: <Navigate to="/noteClass" />
    },
    {
        path: '/login',
        element: <Login />
    },
    {
        path: '/noteClass',
        element: <NoteClass />
    },
    {
        path: '/register',
        element: <Register />
    },
    {
        path: '/noteList',
        element: <NodeList />
    },
    {
        path: '/noteDetail',
        element: <NoteDetail />
    },
    {
        path: '/noteAdd',
        element: <NoteAdd />
    }
];

// 创建一个子组件来使用 useRoutes
// useRoutes这个钩子函数只能用在路由组件中，也就是说该组件不能被抛出
function WrapperRoutes() {
    return useRoutes(routes);
}

export default function WrapperRouter() {
    return (
        <Router>
            <WrapperRoutes />
        </Router>
    );
}